/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 13:15:26
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 16:28:27
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\VoucherProduction.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Progress } from 'antd'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'

import styles from './voucherProduction.module.less'

const headers = [
  { label: '上架' },
  { label: '大烫' },
  { label: '复查' },
  { label: '包装' }
]

export default (props) => {
  const { data } = props

  const yieldTable = useRef<any>()
  const containerRef = useRef<any>()

  const [cWidth, setCWidth] = useState(0)
  const [cHeight, setCHeight] = useState(0)

  // 产量表格滚动
  useEffect(() => {
    if (yieldTable && yieldTable.current) {
      const target = yieldTable.current

      setInterval(() => {
        target.scrollTop += 1
        if (target.scrollTop >= target.scrollHeight - target.clientHeight) {
          target.scrollTop = 0
        }
      }, 64)
    }
  }, [yieldTable])

  useLayoutEffect(() => {
    if (containerRef.current) {
      const containerWidth = containerRef.current.clientWidth
      const containerHeight = containerRef.current.clientHeight
      setCWidth(containerWidth)
      setCHeight(containerHeight)
    }
  }, [])

  useEffect(() => {
    window.addEventListener('resize', () => {
      const containerWidth = containerRef.current.clientWidth
      const containerHeight = containerRef.current.clientHeight
      setCWidth(containerWidth)
      setCHeight(containerHeight)
    })
  }, [cWidth])

  return (
    <div className={styles.chartContainer} ref={containerRef}>
      <header className={styles.voucherHeader}>
        生产中制单数量：{data?.length || 0}
      </header>
      <header className={styles.chartRow}>
        <div className={styles.chartWidth}>制单款号</div>
        {headers.map((header) => (
          <div key={header.label} className={styles.chartCol}>
            {header.label}
          </div>
        ))}
      </header>
      <div className={styles.circleBox} id="scrollRank" ref={yieldTable}>
        {data &&
          data.map((d) => {
            const {
              styleAmount,
              collectClothesAmount,
              ironAmount,
              packAmount,
              reviewAmount
            } = d
            const putOn = Math.round((collectClothesAmount / styleAmount) * 100) //上架
            const putOnColor =
              putOn < 50
                ? '#DD2A2A'
                : putOn >= 50 && putOn < 80
                ? '#F7B500'
                : '#44D7B6'
            const iron = Math.round((ironAmount / styleAmount) * 100) //大烫
            const ironColor =
              iron < 50
                ? '#DD2A2A'
                : iron >= 50 && iron < 80
                ? '#F7B500'
                : '#44D7B6'
            const review = Math.round((reviewAmount / styleAmount) * 100) //复查
            const reviewColor =
              review < 50
                ? '#DD2A2A'
                : review >= 50 && review < 80
                ? '#F7B500'
                : '#44D7B6'
            const pack = Math.round((packAmount / styleAmount) * 100) //宝子
            const packColor =
              pack < 50
                ? '#DD2A2A'
                : pack >= 50 && pack < 80
                ? '#F7B500'
                : '#44D7B6'
            return (
              <div key={d.styleId} className={styles.circleCol}>
                <div className={styles.chartWidth}>
                  {d.styleCode} {d.productCode ? `（${d.productCode}）` : ''}
                </div>
                <div className={styles.chartCol2}>
                  <Progress
                    width={0.12 * cWidth}
                    type="circle"
                    strokeWidth={12}
                    strokeLinecap={'square'}
                    percent={putOn}
                    strokeColor={putOnColor}
                    trailColor="#072C88"
                    format={() => {
                      return (
                        <div className={styles.percent}>
                          <div className={styles.percentCount}>{putOn}%</div>
                          <div className={styles.percentText}>完成率</div>
                        </div>
                      )
                    }}
                  />
                </div>

                <div className={styles.chartCol2}>
                  <Progress
                    width={0.12 * cWidth}
                    type="circle"
                    strokeWidth={16}
                    strokeColor={ironColor}
                    trailColor="#072C88"
                    strokeLinecap={'square'}
                    percent={iron}
                    format={() => {
                      return (
                        <div className={styles.percent}>
                          <div className={styles.percentCount}>{iron}%</div>
                          <div className={styles.percentText}>完成率</div>
                        </div>
                      )
                    }}
                  />
                </div>
                <div className={styles.chartCol2}>
                  <Progress
                    width={0.12 * cWidth}
                    type="circle"
                    strokeWidth={16}
                    strokeLinecap={'square'}
                    strokeColor={reviewColor}
                    trailColor="#072C88"
                    percent={review}
                    format={() => {
                      return (
                        <div className={styles.percent}>
                          <div className={styles.percentCount}>{review}%</div>
                          <div className={styles.percentText}>完成率</div>
                        </div>
                      )
                    }}
                  />
                </div>
                <div className={styles.chartCol2}>
                  <Progress
                    width={0.12 * cWidth}
                    type="circle"
                    strokeWidth={16}
                    strokeLinecap={'square'}
                    strokeColor={packColor}
                    trailColor="#072C88"
                    percent={pack}
                    format={() => {
                      return (
                        <div className={styles.percent}>
                          <div className={styles.percentCount}>{pack}%</div>
                          <div className={styles.percentText}>完成率</div>
                        </div>
                      )
                    }}
                  />
                </div>
              </div>
            )
          })}
      </div>
    </div>
  )
}
